<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reg.css"/>
		<link rel="stylesheet" type="text/css" href="css/head.css"/>
	</head>
	<body>
		<div class="CHL_wrap">
		
		<!--顶部start-->
		<div class="CHL_head_wrap">
				<div class="CHL_head_wrap_img">
					<div class="CHL_head_wrap_img_top"><img src="img/管理游戏2/组 1.png" /></div>
					
					<div class="CHL_top">
						<div class="CHL_head_wrap_img_login">
							<img class="detailback" src="img/users/detailback.png" onclick=javascrtpt:jump()  /></div>
						<div class="CHL_head_wrap_mobileGame">
							<span>玩咖用户注册</span>
						</div>
						<div class="CHL_head_wrap_bianji">
							<span class="editor"><a href="loading.html">登录</a></span>
						</div>
					</div>

				</div>

			</div>
		<!--顶部end-->
		<div class="CHL_content">
			<img src="img/users/regback.png"/>
			<input type="tel" placeholder="请输入手机号" class="CHL_content_number" id="telephone" value="13467899876"/>
			<!--判断-->
			<i class="true status1"></i>
			<i class="false error1"></i>
			<input type="text" placeholder="请输入验证码" class="CHL_content_code" id="textone"/>
			<i class="true status2"></i>
			<i class="false error2"></i>
			<div class="Verification_code" id="texttwo"></div>
			<div class="CHL_content_getcode">
				<a href="###">获取验证码</a>
			</div>
			<input type="password" placeholder="请输入密码(6~20位数字,字母,下划线或标点,不能同一类型)" class="CHL_content_passwordOne"  value="123456a"/>
			<div class="panduanpassword">您输入的密码不合规范,请重新输入!</div>
			<input type="password" placeholder="请再次输入密码" class="CHL_content_passwordTwo" value="123456a" id="password"/>
			<!--判断-->
			<i class="true status3"></i>
			<i class="false error3"></i>
			<div class="CHL_content_reg">
				<a href="###">注册</a>
			</div>
			<div class="weiwancheng">信息未填写完整!</div>
		</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
	<script type="text/javascript">
		$(".CHL_content_number").blur(function() {
			var phone = /^1(3|4|5|7|8)\d{9}$/;
			if(phone.test($(".CHL_content_number").val())) {
				$(".status1").css("display", "block");
			}
			if(!phone.test($(".CHL_content_number").val())) {
				$(".error1").css("display", "block");
			}
		});
		$(".CHL_content_number").focus(function() {
			$(".status1").css("display", "none");
			$(".error1").css("display", "none");
		});

//		//随机色
		function randomColor(){
			var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
		var res="";
		for (var i = 0; i < 6 ; i ++) {
			var id = Math.ceil(Math.random()*16);
			res +=chars[id];
		}
		return "#"+res;
		
		};
		
		function getrandom(){
		var let = new Array('a','b','c','d','e','f','g','h','i','g','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
		var random1 = Math.round(Math.random()*50);
		var random2 = Math.round(Math.random()*50);
		var random3 = Math.round(Math.random()*50);
		var random4 = Math.round(Math.random()*50);
		var text = let[random1]+let[random2]+let[random3]+let[random4];
		return text;
		}
		$(".CHL_content_getcode a").on("mousedown",function(){
			$(".Verification_code").text(getrandom());
			  $(".Verification_code").css("color",randomColor());
		});
		//判断验证码是否相同
		$(".CHL_content_code").focus(function(){
			$(".status2").css("display", "none");
			$(".error2").css("display", "none");
		});
		$(".CHL_content_code").blur(function(){
			if (($("#textone").val()==="")&&($("#texttwo").text()==="")) {
				$(".status2").css("display", "none");
				$(".error2").css("display", "none");
			}else{
				if ($("#textone").val()===$("#texttwo").text()) {
				$(".status2").css("display", "block");
			}else{
				$(".error2").css("display", "block");
			}
			}
			
		});
		//判断密码是否符合格式
		$(".CHL_content_passwordOne").blur(function() {
			var passdword = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,20}$/;
			if(passdword.test($(".CHL_content_passwordOne").val())) {
				$(".panduanpassword").hide();
			}
			if(!passdword.test($(".CHL_content_passwordOne").val())) {
				$(".panduanpassword").show();
			}
		});

		//判断密码是否相同
		$(".CHL_content_passwordTwo").focus(function(){
			$(".status3").css("display", "none");
			$(".error3").css("display", "none");
		});
		$(".CHL_content_passwordTwo").blur(function(){
			if (($(".CHL_content_passwordOne").val()==="")&&($(".CHL_content_passwordTwo").text()==="")) {
				$(".status3").css("display", "none");
				$(".error3").css("display", "none");
			} else{
				if ($(".CHL_content_passwordOne").val()===$(".CHL_content_passwordTwo").val()) {
				$(".status3").css("display", "block");
			}else{
				$(".error3").css("display", "block");
			}
			}
			
		});
	
		function jump() {
			window.location.href = "loading.html";
		}
		//点击注册
//		$(".CHL_content_reg a").on("mousedown",function(){
//			var phone = /^1(3|4|5|7|8)\d{9}$/;
//			var passdword = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,20}$/;
//			if ($(".status1").is(':visible')&&$(".status2").is(':visible')&&$(".status3").is(':visible')) {
//				$(".weiwancheng").hide();
//			}else{
//				$(".weiwancheng").show();
//			}
//		})
	</script>
	<script type="text/javascript">
		$(function(){
			$(".CHL_content_reg a").on("click",function(){
				if ($(".status1").is(':visible')&&$(".status2").is(':visible')&&$(".status3").is(':visible')) {
				$(".weiwancheng").hide();
				$.ajax({
					url:"http://localhost/php/wanka/database.php",
					type:"get",
					dataType:"json",
					data:{
						telephone:$("#telephone").val(),
						password:$("#password").val(),
						act:"add"
					},
					success:function(data){
						if (data.err==0) {
							loadLi(0);
						}else{
							alert(data.msg);
						}
						getCountPage();
					}
				})
			
			}else{
				$(".weiwancheng").show();
			}
				
			
			
			})
		});
	</script>

</html>
